<template>
  <create-view :body-style="{height: '100%'}">
    <div class="details-box">
      <div
        slot="header"
        class="header">
        <span class="text">公告详情</span>
        <span
          class="el-icon-close rt"
          @click="close"/>
      </div>
      <div class="content">
        <div class="title">{{ titleList.title }}</div>
        <div class="time">{{ titleList.createTime }}</div>
        <div class="text">{{ titleList.content }}</div>
      </div>
      <div
        v-if="btnShow"
        class="btn-box">
        <el-button
          v-if="permissionUpdate"
          type="primary"
          @click="onEdit">编辑</el-button>
        <el-button
          v-if="permissionDelete"
          type="danger"
          @click="deleteFun">删除</el-button>
      </div>
    </div>
    <v-edit
      v-if="showEdit"
      :form-data="formData"
      :loading="loading"
      @editSubmit="editSubmit"
      @editClose="editClose"/>
  </create-view>
</template>

<script>
import CreateView from '@/components/CreateView'
import VEdit from './edit'
// API
import { noticeDelete, noticeAdd } from '@/api/oamanagement/notice'
import { mapGetters } from 'vuex'

export default {
  components: {
    CreateView,
    VEdit
  },
  props: {
    titleList: Object,
    btnShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showEdit: false,
      formData: {},
      loading: false
    }
  },
  computed: {
    ...mapGetters(['oa']),
    permissionUpdate() {
      return this.oa && this.oa.announcement && this.oa.announcement.update
    },
    permissionDelete() {
      return this.oa && this.oa.announcement && this.oa.announcement.delete
    }
  },
  methods: {
    onEdit() {
      this.formData = Object.assign({}, this.titleList)
      this.showEdit = true
    },
    close() {
      this.$emit('close')
    },
    deleteFun() {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          noticeDelete({
            id: this.titleList.announcementId
          }).then(res => {
            this.$emit('deleteFun')
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑 -- 取消
    editClose() {
      this.showEdit = false
    },
    // 编辑 -- 确定
    editSubmit() {
      this.loading = true
      noticeAdd({
        announcementId: this.formData.announcementId,
        title: this.formData.title,
        content: this.formData.content,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime
      })
        .then(res => {
          this.$emit('editSubmit', this.formData)
          this.editClose()
          this.$message.success('公告编辑成功')
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.$message.error('公告编辑失败')
        })
    }
  }
}
</script>

<style scoped lang="scss">
$size16: 16px;
.details-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .header {
    .text {
      font-size: $size16;
    }
    .el-icon-close {
      font-size: 20px;
      color: #ccc;
      margin-right: 0;
      cursor: pointer;
    }
  }
  .content {
    margin-top: 10px;
    flex: 1;
    overflow: auto;
    .title {
      font-size: $size16;
      text-align: center;
    }
    .time {
      color: #999;
      text-align: center;
      font-size: 12px;
      margin-top: 8px;
    }
    .text {
      margin-top: 20px;
      line-height: 24px;
      color: #333;
      padding: 0 20px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
  .btn-box {
    text-align: right;
    padding-right: 20px;
  }
}
</style>
